<template>
    <div class="home">
      <home-header v-show="header.menus.length" :header="header" />
      <b-container v-if="header.menus.length && menu" class="home-content">
        <b-row class="w-100" style="margin-left: 0px">
          <b-col cols="12" lg="9" class="mb-3" style="padding-right: 0px; padding-left: 0px;">
            <router-view @shareContent="handleShareContent" />
          </b-col>
          <b-col cols="0" lg="3" class="d-none d-lg-block">
            <home-menu :menu="menu" @search="handleSearch" @tag="handleTag" @induction="handleInduction" />
          </b-col>
        </b-row>
      </b-container>
      <loading v-else />
      <go-top class="top" :height="height" />
      <home-footer
        v-if="header.menus.length && menu"
        :copyrightInfo="config.copyrightInfo"
        :footerDescription="config.footerDescription"
        class="d-lg-flex d-none d-lg-block"
        style="margin-top: 60px;"
      />
    </div>
</template>

<script>
import HomeHeader from '../components/Header'
import HomeContent from './content/Content'
import HomeMenu from '../components/Menu'
import HomeFooter from '../components/Footer'
import GoTop from '../components/GoTop'
import Loading from '../components/Loading'
import { mapActions, mapGetters } from 'vuex'
import { latest } from '@/api/comment'
import { menuList } from '@/api/menu'
import { tagList } from '@/api/tag'
import { archive, popular, random } from '@/api/article'
import { meatList } from '@/api/meta'
import { config } from '@/api/config'
import { wxShareApi } from '@/utils/wx-share'

export default {
  name: 'Home',
  data () {
    return {
      height: 46,
      menuQuery: {
        type: 0
      },
      commentQuery: {
        size: 5
      },
      header: {
        logo: {
          'id': 1,
          'name': 'Java攻城师',
          'path': '/'
        },
        menus: []
      },
      menu: {
        'contact': {
          'title': '你的关注是我的荣幸',
          'weChatCode': './static/image/qroce.png'
        },
        'hot': {
          'title': '热门文章',
          'articles': [
            {
              'id': 1,
              'title': '【Spring Boot 十一】 MyBatis 连接数据库',
              'image': 'https://www.27wy.cn/wp-content/cache/Beginning/thumbnail/eab4975dc684-50x50.jpg',
              'date': '12-05',
              'num': 1246
            },
            {
              'id': 2,
              'title': '【Spring Boot 十一】 MyBatis 连接数据库',
              'image': 'https://www.27wy.cn/wp-content/cache/Beginning/thumbnail/eab4975dc684-50x50.jpg',
              'date': '12-05',
              'num': 1246
            },
            {
              'id': 3,
              'title': '【Spring Boot 十一】 MyBatis 连接数据库',
              'image': 'https://www.27wy.cn/wp-content/cache/Beginning/thumbnail/eab4975dc684-50x50.jpg',
              'date': '12-05',
              'num': 1246
            },
            {
              'id': 4,
              'title': '【Spring Boot 十一】 MyBatis 连接数据库',
              'image': 'https://www.27wy.cn/wp-content/cache/Beginning/thumbnail/eab4975dc684-50x50.jpg',
              'date': '12-05',
              'num': 1246
            }
          ]
        },
        'random': {
          'title': '随机文章',
          'articles': [
            {
              'id': 1,
              'title': '【Spring Boot 十一】 MyBatis 连接数据库',
              'image': 'https://www.27wy.cn/wp-content/cache/Beginning/thumbnail/eab4975dc684-50x50.jpg',
              'date': '12-05',
              'num': 1246
            },
            {
              'id': 2,
              'title': '【Spring Boot 十一】 MyBatis 连接数据库',
              'image': 'https://www.27wy.cn/wp-content/cache/Beginning/thumbnail/eab4975dc684-50x50.jpg',
              'date': '12-05',
              'num': 1246
            },
            {
              'id': 3,
              'title': '【Spring Boot 十一】 MyBatis 连接数据库',
              'image': 'https://www.27wy.cn/wp-content/cache/Beginning/thumbnail/eab4975dc684-50x50.jpg',
              'date': '12-05',
              'num': 1246
            }
          ]
        },
        'induction': {
          'title': '文章归纳',
          'data': ['2018年九月', '2018年九月', '2018年九月', '2018年九月', '2018年九月']
        },
        'tags': {
          'title': '热门文章',
          'tag': [
            {
              'id': 1,
              'name': '防盗链'
            },
            {
              'id': 2,
              'name': 'Java'
            },
            {
              'id': 3,
              'name': 'SSH'
            },
            {
              'id': 4,
              'name': 'SVN'
            },
            {
              'id': 5,
              'name': 'SpringBoot'
            },
            {
              'id': 6,
              'name': '架构'
            },
            {
              'id': 7,
              'name': '代理'
            }
          ]
        },
        'comments': {
          'title': '评论',
          'comment': [
            {
              'id': 1,
              'avatar': 'https://www.27wy.cn/wp-content/cache/Beginning/avatar/b180f92a41137c22b540d422c7fbbe20.png',
              'nickName': '叶健枫',
              'content': '锐哥好帅啊啊啊啊啊啊啊啊啊啊啊'
            },
            {
              'id': 2,
              'avatar': 'https://www.27wy.cn/wp-content/cache/Beginning/avatar/b180f92a41137c22b540d422c7fbbe20.png',
              'nickName': '叶健枫',
              'content': '锐哥好帅啊啊啊啊啊啊啊啊啊啊啊'
            },
            {
              'id': 3,
              'avatar': 'https://www.27wy.cn/wp-content/cache/Beginning/avatar/b180f92a41137c22b540d422c7fbbe20.png',
              'nickName': '叶健枫',
              'content': '锐哥好帅啊啊啊啊啊啊啊啊啊啊啊'
            },
            {
              'id': 4,
              'avatar': 'https://www.27wy.cn/wp-content/cache/Beginning/avatar/b180f92a41137c22b540d422c7fbbe20.png',
              'nickName': '叶健枫',
              'content': '锐哥好帅啊啊啊啊啊啊啊啊啊啊啊'
            }
          ]
        },
        'contacts': {
          'title': '联系我',
          'image': 'https://www.27wy.cn/wp-content/uploads/2018/07/button_111.jpg',
          'path': '#'
        }
      },
      system: {
        background: ['#23BDBD', '#d63031', '#409EFF', '#E6A23C', '#fd79a8', '#a29bfe']
      },
      meta: [
        {
          name: 'keywords',
          content: 'Java,Spring Cloud,Docker,微服务架构,Spring Boot'
        }, {
          name: 'description',
          content: 'Java,Spring Cloud、Docker、微服务架构、Cloud Native相关知识分享。'
        }
      ],
      config: {
        title: 'Blog',
        copyrightInfo: '',
        footerDescription: ''
      },
      initOption: {
        title: null, // 分享标题, 请自行替换
        desc: '一只会打代码的熊', // 分享描述, 请自行替换
        link: window.location.href, // 分享链接，根据自身项目决定是否需要split
        imgUrl: 'https://c-ssl.duitang.com/uploads/item/202005/03/20200503164716_G2jRM.thumb.1000_0.jpeg', // 分享图标, 请自行替换，需要绝对路径
        success: () => {},
        error: () => {}
      },
      option: {
        title: null, // 分享标题, 请自行替换
        desc: '一只会打代码的熊', // 分享描述, 请自行替换
        link: window.location.href, // 分享链接，根据自身项目决定是否需要split
        imgUrl: 'https://c-ssl.duitang.com/uploads/item/202005/03/20200503164716_G2jRM.thumb.1000_0.jpeg', // 分享图标, 请自行替换，需要绝对路径
        success: () => {},
        error: () => {}
      }
    }
  },
  watch: {
    // 重置微信分享信息
    $route (to, from) {
      if (to.path.indexOf('content_detail') === -1) {
        this.option = this.initOption
      }
    },
    // 微信分享信息发生变化，重载微信分享监听
    'option': function (newContent) {
      this.wxRegCallback()
    }
  },
  mounted () {
    this.getMenuList()
    this.getCommentList()
    this.getTagList()
    this.getArchive()
    this.getPopular()
    this.getRandom()
    this.getMeatList()
    this.getConfig()
  },
  methods: {
    getMenuList () {
      menuList(this.menuQuery).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          this.header.menus = data
        }
      })
    },
    // 获取最新评论列表
    getCommentList () {
      latest(this.commentQuery).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          // 评论数据
          this.menu.comments.comment = data
        }
      })
    },
    // 获取标签
    getTagList () {
      tagList().then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          // 评论数据
          this.menu.tags.tag = data
        }
      })
    },
    // 获取归档
    getArchive () {
      archive(5).then(response => {
        // 判断是否是成功请求
        if (response.data.code === 200) {
          var data = response.data.data
          // 评论数据
          this.menu.induction.data = data
        }
      })
    },
    // 获取热门文章
    getPopular () {
      popular(5).then(response => {
        this.menu.hot.articles = response.data.data
      })
    },
    // 获取随机文章
    getRandom () {
      random(5).then(response => {
        this.menu.random.articles = response.data.data
      })
    },
    // 搜索文章
    handleSearch (search) {
      this.$router.push({
        path: `/content?search=${search}`
      })
    },
    // 根据归档日期搜索文章
    handleInduction (date) {
      this.$router.push({
        path: `/content?induction=${date}`
      })
    },
    // 根据标签搜索文章
    handleTag (id) {
      this.$router.push({
        path: `/content?tagId=${id}`
      })
    },
    // 获取meta列表
    getMeatList () {
      meatList().then(response => {
        if (response.data.code === 200) {
          this.meta = response.data.data
        }
      })
    },
    // 获取基础配置
    getConfig () {
      config(0).then(response => {
        if (response.data.code === 200) {
          this.config = response.data.data
          this.initOption.title = this.config.websiteName
          this.option.title = this.config.websiteName
          wxShareApi.wxRegister(this.wxRegCallback())
        }
      })
    },
    // 监听文章详情页面的分享信息
    handleShareContent (option) {
      this.option = option
    },
    // 微信分享
    wxRegCallback () {
      // 微信分享给朋友
      wxShareApi.shareAppMessage(this.option)
      // 微信分享到朋友圈
      wxShareApi.shareTimeline(this.option)
      // 微信分享到QQ
      wxShareApi.shareQQ(this.option)
      // 微信分享到腾讯微博
      wxShareApi.shareWeibo(this.option)
      // 微信分享到QQ空间
      wxShareApi.shareQZone(this.option)
    },
    ...mapActions([
      'setBackground',
      'setSearch'
    ])
  },
  metaInfo () {
    return {
      title: this.config.title,
      meta: this.meta
    }
  },
  computed: {
    ...mapGetters([
      'getBackground'
    ])
  },
  created () {
    this.setBackground(this.system.background[parseInt(Math.random() * 6)])
  },
  components: {
    HomeHeader,
    HomeContent,
    HomeMenu,
    HomeFooter,
    GoTop,
    Loading
  }
}
</script>

<style scoped lang="stylus">
  @media (min-width: 540px)
    .home-content {
      padding-bottom 60px
    }

  .home
    .home-content
      margin auto
      padding-left 0
      padding-right 0
    .top
      position fixed
      right 20px
      bottom 80px
</style>
